
<script lang="ts" setup>
import { Microphone,Document, VideoPause,Promotion} from '@element-plus/icons-vue'
import { ref } from "vue";

const input = ref('')
const isCollapse = ref(true)


</script>

<template>
    <div class="input-at-bottom">
    <el-icon style="margin-left: 10px;" size="30px" @click="isCollapse=!isCollapse" v-show="isCollapse"><Microphone /></el-icon>
    <el-icon style="margin-left: 10px;" size="30px" @click="isCollapse=!isCollapse" v-show="!isCollapse" ><VideoPause /></el-icon>
    <el-icon style="margin-left: 10px;" size= "30px"><Document /></el-icon>
     <el-input
    v-model="input"
    style="width: 800px; position: absolute; left: 50%; transform: translateX(-50%);"
    autosize="true"
    placeholder="Please input"
    clearable
  />
  <el-icon style="margin-left: 840px;" size= "30px"><Promotion /></el-icon>
</div>
</template>

<style lang="scss"scoped>
.input-at-bottom {
  position: relative; // 创建包含块，使得绝对定位生效
  bottom: -600px;
}
</style>